// Preview pane

#file-list {
    position:absolute;
    top:0;
    left:0%;
    bottom:0;
    width:100%;
    overflow-y: auto;
    overflow-x:hidden;
    outline: none;
    transition:0.3s left ease;

    &.hidden { left:100%; }

    div.list-item {
      overflow: hidden;
      line-height: @tile-height-min;
      padding-left: 6px;
      position: relative;

      // The meta information div in the extended file list
      div.meta {
        white-space: nowrap;
        height: @tile-height-min;
        line-height: inherit;

        // Small info blocks inside the file meta
        .date, .id, .tags, .tex-indicator,
        .directories, .files {
          font-size:75%;
          border-radius:4px;
          padding:2px 4px;
          margin-right: 4px;
        }

        // Optional target progress meter, if a target has been set
        .target-progress-indicator {
          vertical-align: middle;
          margin: 0 4px;
          transform: rotateZ(-90deg); // Beginning must be at the top
        }
      }

      p.filename {
        // Prevent line breaking in the titles and give a little spacing
        // before and after
        white-space: nowrap;
        display: block;
        line-height: @tile-height-min;
        width: 100%;
        overflow: hidden;
      }

      /* Taglist stuff */
      .taglist {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        display: flex;
        align-items: center;
        width: @tag-size;
        justify-content: space-between;
        transition: 0.2s width ease;

        .tag {
          height: @tag-size;
          width: auto;
          margin:0 auto;
          transition: 0.2s all ease-out;
        }

        &:hover {
          width: 100%;
          right: 0;
          transition: 0.2s width ease;

          .tag {
            width: @tag-size;
            border-radius: @tag-size / 2;
            transition: 0.2s all ease-in;
          }
        }

        .tagspacer {
          flex-grow: 1;
          text-align: center;
          overflow: hidden;

          .tag {
            border-top: 2px solid white;
            border-bottom: 2px solid white;
          }
        }

        .tagspacer:only-child .tag {
          width: @tag-size;
          border-radius: @tag-size / 2;
        }

        .tagspacer:first-child .tag {
          border-top-left-radius: @tag-size / 2;
          border-bottom-left-radius: @tag-size / 2;
          border-left: 2px solid white;
        }

        .tagspacer:last-child .tag {
          border-top-right-radius: @tag-size / 2;
          border-bottom-right-radius: @tag-size / 2;
          border-right: 2px solid white;
        }
      }

      &.directory {
        white-space: nowrap;

        .sorter {
          display:block;
          position:absolute;
          top:0;
          left:0;
          bottom:0;
          right:0;
          text-align: right;
          margin:0;

          .sortDirection, .sortType {
            display: inline-block;
            margin: 3px;
          }
        }
      }
    } // END list item

    .empty-file-list, .empty-directory {
        display: block;
        text-align: center;
        padding: 10px;
        margin-top: 50%;
        font-weight: bold;
        font-size: 200%;
    }
}
